<template>
    <div class="content-wrap">
        <div class="personal-info-box">
            <ul class="personal-info-list">
                <li>
                    <span class="info-list-name">角色</span>
                    <div class="info-list-text">{{roleName}}</div>
                </li>
                <li>
                    <span class="info-list-name">用户名</span>
                    <div class="info-list-text">{{nickName}}</div>
                </li>
                <li>
                    <span class="info-list-name">姓名</span>
                    <div class="info-list-text">{{userName}}</div>
                </li>
                <li>
                    <span class="info-list-name">手机号</span>
                    <div class="info-list-text">{{phone}}</div>
                </li>
                <li>
                    <span class="info-list-name">性别</span>
                    <div class="info-list-text">{{gender == 1 ? '男' : gender == 2 ? '女' : '未知'}}</div>
                </li>
                <li>
                    <span class="info-list-name">部门</span>
                    <div class="info-list-text">{{dept}}</div>
                </li>
                <li>
                    <el-button size="medium" @click="editPhone">修改手机号</el-button>
                    <el-button size="medium" type="primary" @click="backFn">返回上一页</el-button>
                </li>
            </ul>
        </div>

        <el-dialog
            title="修改手机号"
            :visible.sync="dialogFlag"
            width="456px"
            :show-close="false"
            center
            class="dialog-content">
            <ul class="dialog-wrap">
                <li>
                    <div class="old-phone">{{phone}}</div>
                </li>
                <li>
                    <input 
                        type="text" 
                        placeholder="请输入短信验证码" 
                        v-model="smsCode"
                        maxlength="4"
                        @keyup="inputChange(1)">
                    <el-button type="text" class="times color-primary get-code" v-if="sendMsgFlag">{{times}}</el-button>
                    <el-button type="text" class="get-code" @click="sendMsg" v-else>{{sendBtnText}}</el-button>
                </li>
                <li>
                    <input 
                        class="phone"
                        type="text" 
                        placeholder="请输入新手机号" 
                        v-model="newPhone"
                        maxlength="11"
                        @keyup="inputChange(2)"
                    >
                </li>
            </ul>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="cancelEditPhoneFn">取 消</el-button>
                <el-button size="small" type="primary" @click="sureEditPhoneFn">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Storage from "@/utils/storage";
export default {
    data() {
        return {
            roleName: '',
            nickName: '',
            userName: '',
            phone: '18274863141',
            gender: '',
            dept: '',
            currentUserId: '',

            dialogFlag: false,
            smsCode: '',
            newPhone: '',

            loginLoadFlag: false,
            sendMsgFlag: false, //发送验证码按钮状态
            sendBtnText: '获取验证码', //发送验证码文字
            times: '60s', //倒计时文字
        }
    },
    created() {
        let editFlag = this.$route.query.editFlag;
        if(editFlag) {
            this.dialogFlag = true;
        }
        this.getUserInfo()
    },
    watch: {
        $route(to, from) {
            if(to.name == 'personalInfo') {
                if(to.query.editFlag) {
                    this.dialogFlag = true;
                }
            }
        }
    },
    methods: {
        getUserInfo() {
            this.$http.get('/sys_user/detail/' + Storage.get('userId'))
                .then((res) => {
                    this.roleName = res.data.roleName,
                    this.nickName = res.data.nickName,
                    this.userName = res.data.userName,
                    this.phone = res.data.phone,
                    this.gender = res.data.gender,
                    this.dept = res.data.dept || '无',
                    this.currentUserId = res.data.id
                })
        },
        editPhone() {
            this.dialogFlag = true;
        },

        inputChange(val) {
            switch(val) {
                case 1:
                    // 只能输入数字
                    this.smsCode = this.smsCode.replace(/[^\d]/g, '')
                    break;
                case 2:
                    // 只能输入数字
                    this.newPhone = this.newPhone.replace(/[^\d]/g, '')
                    break;
            }
        },
        sendMsg() {
            this.sendMsgAjax()
        },
        sendMsgAjax() {
            let params = {
                phone: this.phone
            }
            this.$http.post('/sys_user/phone_sms', params)
                .then((res) => {
                    this.sendMsgFlag = true;
                    this.countdown();
                })
        },
        countdown() { //倒计时
            let time = 60;
            let t = setInterval(() => {
                time--;
                this.times = `${time}s`;
                if(time <= 0){
                    clearInterval(t)
                    this.sendBtnText = '重新获取';
                    this.sendMsgFlag = false;
                    this.times = '60s';
                }
            }, 1000)
        },

        cancelEditPhoneFn() {
            this.smsCode = ''
            this.newPhone = ''
            this.dialogFlag = false
        },

        sureEditPhoneFn() {
            if(!this.smsCode) {
                this.$message.error('请输入短信验证码')
                return
            }
            if(!this.newPhone) {
                this.$message.error('请输入新手机号')
                return
            }

            let regexPhone = /^1[3456789]\d{9}$/.test(this.newPhone)
            if(!regexPhone) {
                this.$message.error('请输入正确的手机号')
                return
            }
            
            this.sureEditAjaxFn()
        },
        sureEditAjaxFn() {
            let params = {
                smsCode: this.smsCode,
                newPhone: this.newPhone
            }

            this.$http.post('/sys_user/updatephone', params)
                .then((res) => {
                    if(res.data.code == -9994 || res.data.code == -9997 || res.data.code == 99) {
                        this.$message.error(res.data.message)
                        return
                    }
                    this.dialogFlag = false;
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    setTimeout(() => {
                        this.getUserInfo()
                    }, 1000)
                })
        },

        backFn() {
            this.$router.back()
        }
    }
}
</script>

<style lang="scss" scoped>
    .personal-info-box {
        .personal-info-list {
            margin-top: 24px;
            li {
                display: flex;
                align-items: center;
                margin-bottom: 24px;
                .info-list-name {
                    width: 100px;
                    margin-right: 24px;
                    text-align: right;
                }
                .info-list-text {
                    width: 306px;
                    height: 36px;
                    line-height: 36px;
                    padding-left: 32px;
                    box-sizing: border-box;
                    border: 1px solid #D0CFCF;
                }
                button {
                    margin-top: 16px;
                }
                button:nth-of-type(1) {
                    margin-left: 140px;
                    margin-right: 40px;
                }
            }
        }
    }

    .dialog-content {
        width: 100%;
        padding: 0 74px;
        box-sizing: border-box;
        .dialog-wrap {
            display: flex;
            flex-direction: column;
            li {
                display: flex;
                align-items: center;
                margin-bottom: 24px;
                color: #5D6164;
                &:nth-of-type(1) {
                    height: 40px;
                    line-height: 40px;
                    padding-left: 15px;
                    box-sizing: border-box;
                    border: 1px solid #D0CFCF;
                }
                &:nth-of-type(2) {
                    .get-code {
                        width: 160px;
                        height: 39px;
                        line-height: 39px;
                        margin-left: 16px;
                        border: 1px solid #31BC8D;
                        color: #31BC8D;
                        text-align: center;
                        box-sizing: border-box;
                        cursor: pointer;
                    }
                    .get-code:hover {
                        background-color: #31BC8D;
                        color: #fff;
                    }
                }
                &:nth-of-type(3) {
                    .el-input {
                        height: 36px;
                    }
                }

                .get-code {
                    line-height: 0!important;
                    border-radius: 0;
                }
                input {
                    height: 38px;
                    border: 1px solid #D0CFCF;
                    padding: 0;
                    padding-left: 15px;
                    outline: none;
                }
                .phone {
                    width: 100%;
                }
            }
        }
    }
</style>
<style lang="scss">
    .dialog-content {
        .el-dialog {
            .el-dialog__body {
                padding: 24px 74px;
            }
            .el-dialog__footer {
                .el-button+.el-button {
                    margin-left: 50px;
                }
            }
        }
    }
</style>